<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <!-- 
    首先，需要创建一个弹性容器，指定一个元素设置display:flex；
  -->
  <style>
    .box{
      border: 1px solid ;
      display: flex;
      /* 
        设置item(项目)在主轴的对齐方式
        justify-content: start;根据主轴开始位置对齐
                         end;根据主轴结束位置对齐
                         center;主轴居中
                         space-between;两端对齐
                         space-evenly;均分对齐,均分item之间的间隙,item相隔距离一样
                         space-around;环绕对齐，item之间的间隙是，两端间隙的两倍
      */
      justify-content: start;
      justify-content: end;
      justify-content: center;
      justify-content: space-between;
      justify-content: space-evenly;
      justify-content: space-around;
    }
    .box span{
      width: 50px;
      height: 50px;
      background-color:#ccc ;
    }
  </style>
  <div class="box">
    <span>1</span>
    <span>2</span>
    <span>3</span>
  </div>

  <!-- start;根据主轴开始位置对齐 -->
  <style>
    
    .start{
      display: flex;
      border: 1px solid;
    }
    .start >span{
      width: 50px;
      height: 50px;
      background-color:#ccc ;
      border: 1px solid ;
    }
  </style>
  <h2>justify-content:start</h2>
  <div class="start">
    <span>start</span>
    <span>center</span>
    <span>end</span>
  </div>


  <!--  center;主轴居中 -->
  <style>
    .center{
      display: flex;
      border: 1px solid;
      justify-content: center;
    }
    .center >span{
      width: 50px;
      height: 50px;
      background-color:#ccc ;
      border: 1px solid ;
    }
  </style>
  <h2>justify-content:center</h2>
  <div class="center">
    <span>start</span>
    <span>center</span>
    <span>end</span>
  </div>



  <!-- end;根据主轴结束位置对齐 -->
  <style>
    .end{
      display: flex;
      border: 1px solid;
      justify-content: end;
    }
    .end >span{
      width: 50px;
      height: 50px;
      background-color:#ccc ;
      border: 1px solid ;
    }
  </style>
  <h2>justify-content:end</h2>
  <div class="end">
    <span>start</span>
    <span>center</span>
    <span>end</span>
  </div>





  <!--   space-between;两端对齐 -->
  <style>
    .space-between{
      display: flex;
      border: 1px solid;
      justify-content: space-between;
    }
    .space-between >span{
      width: 50px;
      height: 50px;
      background-color:#ccc ;
      border: 1px solid ;
    }
  </style>
  <h2>justify-content:space-between</h2>
  <div class="space-between">
    <span>start</span>
    <span>center</span>
    <span>end</span>
  </div>






  <!-- space-evenly;均分对齐,均分item之间的间隙,item相隔距离一样 -->
  <style>
    .space-evenly{
      display: flex;
      border: 1px solid;
      justify-content: space-evenly;
    }
    .space-evenly >span{
      width: 50px;
      height: 50px;
      background-color:#ccc ;
      border: 1px solid ;
    }
  </style>
  <h2>justify-content:space-evenly</h2>
  <div class="space-evenly">
    <span>start</span>
    <span>center</span>
    <span>end</span>
  </div>







  <!--  space-around;环绕对齐，item之间的间隙是，两端间隙的两倍 -->
  <style>
    .space-around{
      display: flex;
      border: 1px solid;
      justify-content: space-around;
    }
    .space-around >span{
      width: 50px;
      height: 50px;
      background-color:#ccc ;
      border: 1px solid ;
    }
  </style>
  <h2>justify-content:space-around</h2>
  <div class="space-around">
    <span>start</span>
    <span>center</span>
    <span>end</span>
  </div>
</body>
</html>